<template>
    <div class="">
        <el-upload class="upload-demo" drag action="https://ssy.13yu.com/index.php/Admin/Api/upload" multiple
            :on-success="handleSuccessTMT">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="filemy">
            <div class="filemy-img" v-for="(item, index) in tm_img" :key="item" @mouseover="url = item"
                @mouseleave="url = ''">
                <el-image :src="item" fit="cover" class="filemy-img-image"></el-image>
                <div class="filemy-img-popup" v-if="item == url">
                    <i class="el-icon-zoom-in" @click="handlePictureCardPreview({ url: item })"></i>
                    <i class="el-icon-delete" v-if="process_sheet_status == 0" @click="onImageDelete(index)"></i>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisibleImage" :modal="false">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
import {
    postAdminOperateProcess_sheet_tuimaing
} from "@/api";
export default {
    props: {
        type_no: "",
        tm_img: "",
        process_sheet_status:""
    },
    data() {
        return {
            url: "",
            dialogImageUrl: "",
            dialogVisibleImage: false
        }
    },
    methods: {
        async handleSuccessTMT(response) {
            let { tm_img, type_no } = this;
            tm_img.push(response.img)
            this.tm_img = tm_img
            let obj = {
                tm_img,
                type_no,
            }
            await postAdminOperateProcess_sheet_tuimaing(obj)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisibleImage = true;
        },
        // 删除图片
        async onImageDelete(index) {
            let { tm_img, type_no } = this
            tm_img.splice(index, 1)
            this.tm_img = tm_img
            let obj = {
                type_no,
                tm_img
            }
            await postAdminOperateProcess_sheet_tuimaing(obj)
        },
    }
}
</script>

<style lang="scss" scoped>
.filemy {
    display: flex;
    flex-wrap: wrap;
    .filemy-img {
        margin-top: 10px;
        position: relative;

        .filemy-img-image {
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }

        .filemy-img-popup {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba($color: #000000, $alpha: 0.3);
            color: #ffffff;
            font-size: 20px;

            >i {
                margin: 5px;
            }
        }
    }
}


.upload-demo {
    /deep/ .el-upload-list {
        display: none;
    }
}
</style>